<template>
    <Row>
        <Col span="24">
            <Card shadow>
                <p slot="title">
                    <Icon type="md-pin" />
                    热力图区域
                </p>
                <Form
                    ref="poiForm"
                    :model="formData"
                    :rules="formRules"
                    :label-width="90"
                    label-position="left"
                    class="form-wrapper"
                >
                    <FormItem label="ID" prop="id">
                        <Row>
                            <Col span="24">
                                <Input
                                    v-model="formData.id"
                                    :disabled="isInEdit"
                                    placeholder="请输入热力图的ID"
                                ></Input>
                            </Col>
                        </Row>
                    </FormItem>
                    <FormItem label="取值范围" prop="range">
                        <Row>
                            <Col span="24">
                                <Input
                                    v-model="formData.range"
                                    placeholder="请输入最小值和最大值，以逗号分隔"
                                ></Input>
                            </Col>
                        </Row>
                    </FormItem>
                    <FormItem label="直径" prop="diameter">
                        <Row>
                            <Col span="24">
                                <Input
                                    v-model="formData.diameter"
                                    placeholder="请输入每个点的直径大小"
                                ></Input>
                            </Col>
                        </Row>
                    </FormItem>
                    <FormItem>
                        <Button type="primary" @click="savePinData"
                            >保存数据</Button
                        >
                        <Button
                            type="error"
                            v-if="isInEdit"
                            @click="deletePOIData"
                            >删除</Button
                        >
                    </FormItem>
                </Form>
            </Card>
        </Col>
    </Row>
</template>

<script>
    import config from "@/config/global";
    import { busEventEmit, busEventHandle } from "@/teleport/bus";
    import { clone } from "@/libs/tools";

    export default {
        name: "",
        props: {
            excelData: {
                type: Object,
                default: () => new Object(),
            },
        },
        data() {
            return {
                formData: {
                    id: null,
                    range: null,
                    diameter: null,
                    area: {},
                },
                formRules: {
                    id: [
                        { required: true, message: "不能为空", trigger: "change" },
                    ],
                    range: [
                        { required: true, message: "不能为空", trigger: "change" },
                    ],
                    diameter: [
                        { required: true, message: "不能为空", trigger: "change" },
                    ],
                },
                isInEdit: false,
            };
        },
        watch: {
            excelData: {
                handler(n, o) {
                    if (n !== o) {
                        this.updatePOICoord(n);
                    }
                },
                deep: true,
                immediate: true,
            },
        },
        methods: {
            savePinData() {
                this.$refs["poiForm"].validate((valid) => {
                    if (valid) {
                        this.$Message.success("热力图配置已更新");
                        let resultData = {};
                        resultData = this.formData;
                        if (this.isInEdit) {
                            busEventEmit(
                                "heatmap-rect-data-mutanted",
                                clone(resultData)
                            );
                            busEventEmit(
                                "mutant-rect-result",
                                JSON.stringify(resultData)
                            );
                            this.isInEdit = false;
                        } else {
                            busEventEmit(
                                "heatmap-rect-data-complete",
                                clone(resultData)
                            );
                            busEventEmit(
                                "push-rect-result",
                                JSON.stringify(resultData)
                            );
                        }
                    } else {
                        this.$Message.error("请检查表单是否正确填写");
                    }
                });
            },
            deletePOIData() {
                // TODO:
                busEventEmit("delete-rect-result", this.formData.id);
                busEventEmit("delete-rect", this.formData.id);
                this.isInEdit = false;
            },
            listenUpdateFormEvent() {
                const $this = this;
                busEventHandle("update-form-data", (msg) => {
                    $this.updateFromEvent(msg);
                });
            },
            updateFromEvent(v) {
                this.formData.id = v.id;
                this.formData.area = v.area;
            },
            updatePOICoord(v) {
                this.formData.area = v.area;
            },
        },
        created() {
            this.listenUpdateFormEvent();
        },
    };
</script>

<style lang="" scoped>
</style>